<template>
  <div class="demo-progress">
    <el-progress type="line" :percentage="p" v-bind="$attrs" :text-inside="true" :stroke-width="20"></el-progress>
    <!-- <el-progress type="dashboard" :percentage="used" status="success" ></el-progress> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

let props = defineProps({
  // 进度条进度
  percentage: {
    type: Number,
    default: 0,
  },
  // 是否要动画
  isAnimation: {
    type: Boolean,
    default: false,
  },
  // 时长 (ms)
  time: {
    type: Number,
    default: 3000,
  },
})

const p = ref(0)

// props.percentage 初始值触发
onMounted(() => {
  animation()
})

const animation = () => {
  if (props.isAnimation) {
    // 规定时间内完成
    let t = Math.ceil(props.time / props.percentage)
    let timer = setInterval(() => {
      p.value += 1
      if (p.value >= props.percentage) {
        p.value = props.percentage
        clearInterval(timer) // 停止
      }
    }, t)
  } else {
    // 无动画,直接显示
    p.value = props.percentage
  }
}

watch(
  () => props.percentage,
  val => {
    animation()
  },
)
</script>

<style scoped>
svg {
  width: 100px;
  height: 100px;
}
/* .demo-progress .el-progress--circle {
  margin-right: 15px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
} */
</style>
